<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					class="small-size-table"
					:data="tableData"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						prop="creditLevel"
						align="center"
						:label="$t('member.credit_rating')"
					>
						<template slot-scope="scope">
							{{ scope.row }}
						</template>
					</el-table-column>
					<!-- <el-table-column
						prop="creditLevelName"
						align="center"
						:label="$t('member.credit_rating_name')"
					>
						<template slot-scope="scope">
							{{ scope.row }}
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.last_updateBy')"
					>
						<template slot-scope="scope">
							{{ scope.row }}
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
					>
						<template slot-scope="scope">
							{{ scope.row }}
						</template>
					</el-table-column>
					<el-table-column
						prop="loginStatus"
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-button
								type="primary"
								@click="handleEdit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column> -->
				</el-table>
			</div>
			<el-dialog
				:title="$t('common.edit')"
				:visible.sync="editVisible"
				width="30%"
				:close-on-click-modal="true"
				:destroy-on-close="true"
				:before-close="handleClose"
				@close="handleClose"
			>
				<el-form
					ref="editForm"
					:model="editForm"
					:rules="rules"
					label-position="right"
					label-width="120px"
				>
					<el-form-item
						:label="$t('member.credit_rating')"
						prop="creditLevel"
						class="is-required"
					>
						{{ editForm.creditLevel }}
					</el-form-item>
					<!-- <el-form-item
						:label="$t('member.credit_rating_name')"
						prop="creditLevelName"
					>
						<el-input
							v-input="{ name: 'noEmpty' }"
							v-model.trim="editForm.creditLevelName"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item> -->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="medium" @click="handleClose">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button
						type="primary"
						:disabled="isEdit"
						size="medium"
						@click="submitForm"
					>
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.createRiskRank,
	mixins: [list],
	data() {
		return {
			tableData: [],
			editVisible: false,
			isEdit: false,
			editForm: {
				id: undefined,
				creditLevel: undefined,
				creditLevelName: undefined
			},
			rules: {
				creditLevelName: [
					{ required: true, message: '请输入', trigger: 'blur' },
					{
						min: 2,
						max: 20,
						message: '长度2~20个字符',
						trigger: 'blur'
					}
				]
			}
		}
	},
	computed: {},
	created() {
		this.loadData()
	},
	methods: {
		loadData() {
			this.loading = true
			this.tableData = []
			this.$api
				.getCreditLevelConfcreditList({ creditType: 1 })
				.then((res) => {
					if (res?.code === 200) {
						this.tableData = res.data || []
					} else {
						this.$message({
							message:
								res?.msg || this.$t('common.interface_error'),
							type: 'error'
						})
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		},
		handleEdit(row) {
			this.editForm = {
				id: row,
				creditLevel: row,
				creditLevelName: row
			}
			this.editVisible = true
		},
		handleClose() {
			this.editVisible = false
			this.editForm = {
				id: undefined,
				creditLevel: undefined,
				creditLevelName: undefined
			}
			this.$refs.editForm.resetFields()
		},
		submitForm() {
			const params = {
				...this.editForm
			}
			this.$refs.editForm.validate((valid) => {
				if (valid) {
					this.isEdit = true
					this.$api
						.getCreditLevelConfUpdateCredit(params)
						.then((res) => {
							if (res.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								this.loadData()
							}
						})
						.catch(() => {})
						.finally(() => {
							this.isEdit = false
							this.editVisible = false
						})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .dialog-footer {
	text-align: right;
	padding-top: 0px;
}
</style>
